<template>
  <div class="all">
    <header class="header">
      <div class="div" @click="back()">
        <img src="../../assets/返回.png" alt="">
        <span>返回</span>
      </div>
      <div class="div">患者详情</div>
      <div class="div"></div>
    </header>
    <div class="content">
      <van-field
        v-model="name"
        label="姓名"
        input-align="right"
        readonly
      />
      <van-field
        v-model="sex"
        label= "性别"
        input-align="right"
        readonly
      >
        <template #input>
          <span v-if="sex == 1">男</span>
          <span v-else-if="sex == 2">女</span>
        </template>
      </van-field>
      <van-field
        v-model="age"
        label= "年龄"
        input-align="right"
        readonly
      >
        <template #input>
          <span v-if="age !== undefined && age.length > 0">{{age}}岁</span>
        </template>
      </van-field>
      <van-field
        v-model="birthday"
        label= "出生日期"
        input-align="right"
        readonly
      />
      <van-field
        v-model="address"
        label= "家庭住址"
        input-align="right"
        readonly
      >
      </van-field>
      <van-field
        v-model="xiangxiaddress"
        label= "详细住址"
        input-align="right"
        readonly
      />
      <van-field
        v-model="phone"
        label="联系电话"
        input-align="right"
        readonly
      />
      <van-field
        v-model="emergencycontact"
        label="紧急联系人"
        input-align="right"
        readonly
      />
      <van-field
        v-model="emergencycontactphone"
        label="紧急联系人电话"
        input-align="right"
        readonly
      />
      <van-field
        v-model="familydoctor"
        label="家庭医生"
        input-align="right"
        readonly
      />
      <van-field
        v-model="physicalcondition"
        label="身体状况"
        input-align="right"
        readonly
      />
      <van-field
        v-model="sleep"
        label="睡眠质量"
        input-align="right"
        readonly
      />
      <van-field
        v-model="livingenvironment"
        label="居住环境"
        input-align="right"
        readonly
      />
      <van-field
        v-model="activity"
        label="活动情况"
        input-align="right"
        readonly
      />
      <van-field
        v-model="eatinghabits"
        label="饮食习惯"
        input-align="right"
        readonly
      />
    </div>
    <div class="bottom">
      <button @click="clickDoctorSay()">康复医嘱</button>
      <span>|</span>
      <button>康复计划</button>
      <span>|</span>
      <button @click="clickPingGu()">康复评估</button>
      <span>|</span>
      <button>营养膳食</button>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'

export default {
  name: 'PatientsDetails',
  data () {
    return {
      userid: '',
      item: '',
      name: '', // 存储输入的姓名
      sex: '',
      age: '',
      birthday: '',
      phone: '',
      address: '', // 家庭地址
      xiangxiaddress: '', // 详细住址
      emergencycontact: '', // 紧急联系人
      emergencycontactphone: '', // 紧急联系人电话
      familydoctor: '', // 家庭医生
      physicalcondition: '', // 身体状况
      sleep: '', // 睡眠质量
      livingenvironment: '', // 居住环境
      activity: '', // 活动情况
      eatinghabits: '', // 饮食习惯
      patientid: '',
      doctorid: ''
    }
  },
  mounted () {
    // 截取网址后的userid
    this.patientid = this.$utils.getUrlKey('patientid')
    this.doctorid = this.$utils.getUrlKey('doctorid')
    $('.content').css({'height': $(window).height() - $('.header').height() - $('.bottom').height() + 'px'})
    this.getPeople()
  },
  methods: {
    // 点击医嘱
    clickDoctorSay () {
      this.$router.push({path: '/doctorAdvice', query: {doctorid: this.doctorid, patientid: this.patientid}})
    },
    // 点击康复评估
    clickPingGu () {
      // PingGuSelectPeople?type=1
      // this.$router.push({path: '/PingGuSelectPeople', query: {type: 1}})
      this.$router.push({path: '/self', query: {ACCEPT_USER_ID: this.patientid, type: 1, assess_type: ''}})
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    },
    // 获取个人基本信息
    getPeople () {
      //  http://jmx-kfdj.com/kfhl/miniindex/findPersonal
      this.$http.findPersonal({USER_ID: this.patientid})
        .then(res => {
          console.log(res)
          // this.patientid = res.data.userid
          this.nick_name = res.data.NICK_NAME2
          this.activity = res.data.activity
          this.address = res.data.address
          this.xiangxiaddress = res.data.xiangxiaddress
          this.age = res.data.age
          this.birthday = res.data.birthday
          this.eatinghabits = res.data.eatinghabits
          this.emergencycontact = res.data.emergencycontact
          this.emergencycontactphone = res.data.emergencycontactphone
          this.familydoctor = res.data.familydoctor
          this.livingenvironment = res.data.livingenvironment
          this.name = res.data.name
          this.phone = res.data.phone
          this.physicalcondition = res.data.physicalcondition
          this.sex = res.data.sex
          this.sleep = res.data.sleep
          this.xiangxiaddress = res.data.xiangxiaddress

          // sessionStorage.setItem('PatientInformation', JSON.stringify(res.data))
          // PatientInformation
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100vw;
  }
  header{
    width: 100%;
    height: 12vw;
    display: flex;
    align-items: center;
    background: #FFFFFF;
    position: sticky;
    top: 0;
    z-index: 99999;
    border-bottom: 1px solid #E5E5E5;
  }
  header .div{
    width: 33%;
  }
  header .div:nth-child(1) img{
    width: 7px;
    height: 13px;
    margin-right: 5px;
  }
  header .div:nth-child(1){
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #1da4f2;
    margin-left: 15px;
    display: flex;
    align-items: center;
  }
  /deep/ .van-field__label{
    width: 9.2em;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  /deep/ .van-field__control:read-only{
    color: #999;
  }
  .content{
    overflow: auto;
  }
  .bottom{
    position: sticky;
    bottom: 0;
    width: 100%;
    height: 49px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    border-top: 1px solid #E5E5E5;
  }
  .bottom button{
    width: 25%;
    border: none;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    background: #FFFFFF;
  }
  .bottom span{
    color: #E5E5E5;
  }
</style>
